<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2003), see www.w3.org"/>
    <title>JavaScript: Modules</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content="Copyright &#169; 2005-2010 W3C (MIT, ERCIM, Keio)"/>
    <meta name="duration" content="5"/>
    <meta name="font-size-adjustment" content="-2"/>

    <link rel="stylesheet" href="styles/slidy.css" type="text/css"/>
    <link rel="stylesheet" href="styles/w3c-blue.css" type="text/css"/>
    <script type="text/javascript" src="scripts/slidy.js" charset="utf-8">//</script>

    <link type="text/css" rel="stylesheet" href="styles/shCoreDefault.css"/>
    <script type="text/javascript" src="scripts/shCore.js"></script>
    <script type="text/javascript" src="scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="scripts/shBrushJava.js"></script>

    <link type="text/css" rel="stylesheet" href="styles/presentation.css"/>
    <script type="text/javascript" src="scripts/presentation.js"></script>
</head>


<body style="">
<div class="background">
    <img alt="" id="head-icon" src="graphics/icon-blue.png"/>
</div>

<div class="background slanty">
</div>

<div class="slide cover title">
    <img class="hidden" src="graphics/bullet.png" alt=""/>
    <img class="hidden" src="graphics/fold.gif" alt=""/>
    <img class="hidden" src="graphics/unfold.gif" alt=""/>
    <img class="hidden" src="graphics/fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/unfold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-fold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-nofold-dim.gif" alt=""/>
    <img class="hidden" src="graphics/bullet-unfold-dim.gif" alt=""/>

    <h1>JavaScript: Modules</h1>

    <div style="position: absolute; bottom: 20px;">
        <p>Alex.Kolonitsky@gmail.com</p>

        <p>
            <a href="http://javascript-learning-courses.googlecode.com">http://javascript-learning-courses.googlecode.com</a>
        </p>
    </div>
</div>

<div class="slide">
    <h1>JS Patterns</h1>

    <ul>
        <li>Module Pattern</li>
        <li>Memoization</li>
    </ul>
</div>

<div class="slide">
    <h1>Module: Import</h1>

    <pre class="brush: js">
        (function ($, YAHOO) {
            // now have access to globals
            // jQuery (as $) and YAHOO in this code
        }(jQuery, YAHOO));
    </pre>
</div>

<div class="slide">
    <h1>Module: Export</h1>

    <pre class="brush: js">
        var MODULE = (function () {
            var my = {};
            var privateVariable = 1;

            function privateMethod() { ... }

            my.moduleProperty = 1;
            my.moduleMethod = function () { ... }

            return my;
        }());
    </pre>
</div>

<div class="slide">
    <h1>Module: Augmentation</h1>

    <pre class="brush: js">
        MODULE = (function (my) {
            my.anotherMethod = function () {
                // added method...
            };

            return my;
        }(MODULE));
    </pre>
</div>

<div class="slide">
    <h1>Module: Loose Augmentation</h1>

    <pre class="brush: js">
        var MODULE = (function (my) {
            // add capabilities...

            return my;
        }(MODULE || {}));
    </pre>
</div>

<div class="slide">
    <h1>Module: Tight Augmentation</h1>

    <pre class="brush: js">
        var MODULE = (function (my) {
            var oldModuleMethod = my.moduleMethod;

            my.moduleMethod = function () {
                // method override, has access to old through oldModuleMethod...
            };

            return my;
        }(MODULE));
    </pre>
</div>

<div class="slide">
    <h1>Module: Cloning and Inheritance</h1>

    <pre class="brush: js">
        var MODULE_TWO = (function (old) {
            var my = {};

            for (var key in old) {
                if (old.hasOwnProperty(key)) {
                    my[key] = old[key];
                }
            }

            var superModuleMethod = old.moduleMethod;
            my.moduleMethod = function () {
                // override method on the clone, access to super through superModuleMethod
            };

            return my;
        }(MODULE));
    </pre>
</div>

<div class="slide">
    <h1>Module: Cloning and Inheritance</h1>

    <pre class="brush: js">
        var MODULE_TWO = (function (old) {
            var my = inheritFrom(old); // or clone(old)

            var superModuleMethod = old.moduleMethod;
            my.moduleMethod = function () {
                // override method on the clone, access to super through superModuleMethod
            };

            return my;
        }(MODULE));
    </pre>
</div>

<div class="slide">
    <h1>Module</h1>

    <ul>
        <li>...</li>
        <li>Tight Augmentation</li>
        <li>Cloning and Inheritance</li>
        <li>Cross-File Private State</li>
        <li>Sub-modules</li>
        <li>...</li>
    </ul>

    <p><a href="http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth" rel="nofollow" target="_blank">Оригинальная статья по теме.</a></p>
</div>

<div class="slide">
    <h1>Memoization</h1>

    <div style="font-size: 55%">
        <pre class="brush: js">
            // Factory method.
            AjaxHandler.prototype.createXhrObject = function() {
                var methods = [
                    function() { return new XMLHttpRequest(); },
                    function() { return new ActiveXObject('Msxml2.XMLHTTP'); },
                    function() { return new ActiveXObject('Microsoft.XMLHTTP'); }
                ];

                for (var i = 0; i < methods.length; i++) {
                    try {
                        methods[i]();
                    } catch(e) {
                        continue;
                    }

                    // If we reach this point, method[i] worked.
                    this.createXhrObject = methods[i]; // Memoize the method.
                    return methods[i];
                }

                // If we reach this point, none of the methods worked.
                throw new Error('SimpleHandler: Could not create an XHR object.');
            };
        </pre>
    </div>
</div>

<div class="slide">
    <h1>Memoization</h1>

    <pre class="brush: js">
        // TODO sample from good part (fib)
    </pre>
</div>

<div class="slide">
    <h1>Good Parts (Douglas Crockford)</h1>

    <dl>
        <dt>Functions as firortranst class objects</dt>
        <dd>Functions in Simplified JavaScript are lambdas with lexical scoping.</dd>
        <dt>Dynamic objects with prototypal inheritance</dt>
        <dd>Objects are class-free. We can add a new member to any object by ordinary assignment. An object can inherit members from another object.</dd>
        <dt>Object literals and array literals</dt>
        <dd>This is a very convenient notation for creating new objects and arrays. JavaScript literals were the inspiration for the JSON data interchange format.</dd>
    </dl>
</div>

<div class="slide">
    <h1>Чтобы я убрал из JS.</h1>

    <ul>
        <li>instanceof</li>
        <li>null</li>
        <li>== & ===</li>
        <li>with</li>
        <li>labels</li>
        <li>switch Fall Through</li>
        <li>Block-less Statements</li>
    </ul>
</div>

<div class="slide">
    <h1>Links</h1>

    <ul>
        <li></li>
    </ul>
</div>

<div class="slide">
    <h1>Вопросы / Предложения</h1>

    <ul>
        <li>Alex.Kolonitsky@gmail.com</li>
        <li>akolonitsky@exadel.com</li>
        <li>Skype: Desargues_</li>
        <li>http://code.google.com/p/javascript-learning-courses/issues/list</li>
    </ul>
</div>

</body>
</html>

